<template>
    <div style="padding-top: -10px;">
            <Input v-model="fileUrl" @on-change="handleChange" placeholder="可直接填入网络链接" :style="{width: width}" clearable/>
            <!--<div slot="content" v-if="fileUrl">
                <video id="mp3" ref="video" :src="fileUrl" width="550" controls="true"></video>
            </div>-->
            <Upload
                    :action="uploadFileUrl"
                    :headers="accessToken"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :format="format"
                    :accept="accept"
                    :data="data"
                    :max-size="fileSize"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="beforeUpload"
                    :show-upload-list="false"
                    ref="up"
                    class="upload"
            >
                <Button :loading="loading" icon="ios-cloud-upload-outline" style="clear:both">{{this.btnText}}</Button>
            </Upload>
        <p>文件大小不超{{fileMaxSize}}{{sizeUnit}}</p>
    </div>
</template>

<script>
    import {uploadFile} from "@/api/index";

    export default {
        name: "uploadFile",
        props: {
            width: {
                type: String,
                default: "100px"
            },
            fileSize:{
                default:500000
            },
            fileUrl: ""
        },
        computed:{
            fileMaxSize:{
                get: function () {
                    if(this.fileSize>=1024&& this.fileSize<1048576){
                        this.sizeUnit="M";
                        return Number(this.fileSize/1024).toFixed(2);
                    }if(this.fileSize>=1048576){
                        this.sizeUnit="G";
                        return Number(this.fileSize/1024/1024).toFixed(2);
                    }else{
                        this.sizeUnit="KB";
                        return this.fileSize;
                    }
                }
            }
        },
        data() {
            return {
                accessToken: {},
                sizeUnit:"KB",
                data: {
                    fileType: "apk"
                },
                format: ['apk'],
                accept: ".apk",
                formats:[['doc','docx','xls','xlsx','pdf','txt'],['apk']],
                accepts:['.doc, .docx, .xls, .xlsx, .pdf, .txt','.apk'],
                loading: false,
                viewImage: false,
                btnText: "选择文件",
                uploadFileUrl: uploadFile
            };
        },
        methods: {
            init() {
                this.accessToken = {
                    Authorization: this.getStore("accessToken")
                }
                if(this.fileType=="file"){
                    this.format=this.formats[0];
                    this.accept=this.accepts[0];
                }
                if(this.fileType=="apk"){
                    this.format=this.formats[1];
                    this.accept=this.accepts[1];
                }
            },
            handleFormatError(file) {
                this.loading = false;
                this.$Notice.warning({
                    title: "不支持的文件格式",
                    desc: "所选文件‘ " + file.name + " ’格式不正确, 请选择" + this.accept + "格式文件"
                });
            },
            handleMaxSize(file) {
                this.loading = false;
                this.$Notice.warning({
                    title: "文件大小过大",
                    desc: "所选文件‘ " + file.name + " ’大小过大,不得超过"+this.fileMaxSize+this.sizeUnit
                });
            },
            beforeUpload() {
                this.loading = true;
                this.btnText = '上传中...'
                this.$emit("on-before");
                return true;
            },
            handleSuccess(res, file) {
                this.loading = false;
                if (res.status === true) {
                    file.url = res.data.fileUrl;
                    this.fileUrl = res.data.fileUrl;
                    this.btnText = '上传文件';
                    this.$emit("on-change", res.data.fileUrl);
                } else {
                    this.$Message.error(res.message);
                }
            },
            handleError(error, file, fileList) {
                this.loading = false;
                this.$Message.error(error.toString());
            },
            handleChange(v) {
                this.$emit("on-change", this.fileUrl);
            },
            setPicUrl(v) {
                this.fileUrl = v;
            },
            popHide() {
                if (this.fileUrl) {
                    this.$refs.video.pause();
                }
            },
            popShow() {
                if (this.fileUrl) {
                    this.$refs.video.play();
                }
            }
        },
        created() {
            this.init();
        }
    };
</script>

<style lang="less">
    .upload {
        display: inline-block;
        margin-left: 10px;
    }
</style>

